<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustom('创建工作流',~{::style})">
    <style>
        .file-footer-caption {
            margin-bottom: 5px!important;
        }
        .file-drop-zone-title {
            padding: 25px 10px!important;
        }
    </style>
</head>
<body>
<div class="ch-container">
    <div class="row">
        <div id="content" class="col-md-12 col-sm-12" style="padding:2px;width: 99%;">
            <div class="row">
                <div class="box col-sm-12" style="margin-top:5px;" >
                    <form class="form-horizontal" >
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                            <div class="form-group">
                                <label class="control-label col-sm-1"><img style="width: 70px;" th:src="@{/static/img/head/default.jpg}" th:alt="${workflowInfo.creator}" class="img-circle"></label>
                                <div class="col-sm-6">
                                    <p style="margin-top: 20px"><span th:text="${workflowInfo.creator}"></span> <span style="margin-left: 50px;" th:text="${#dates.format(workflowInfo.createTime,'yyyy-MM-dd HH:mm:ss')}"></span></p>
                                    <p th:switch="${workflowInfo.state}">
                                        <span class="label-default label" th:case="0">已终止</span>
                                        <span class="label-danger label" th:case="1">待审批</span>
                                        <span class="label-success label" th:case="2">已完成</span>
                                    </p>
                                </div>
                            </div>
                            <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                                <legend style="text-align: left;font-size: 14px;border: 0;width: auto;margin-bottom: auto;"><span style="font-weight:bold;">问题反馈</span></legend>
                                <div class="form-group">
                                    <label class="control-label col-sm-1" style="margin-right: 10px;">课程老师:</label>
                                    <div class="col-sm-2" style="padding-left: 0;">
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.teacherLogin}"></p>
                                    </div>
                                    <label class="control-label col-sm-1" style="margin-right: 10px;">课程时间:</label>
                                    <div class="col-sm-2" style="padding-left: 0;">
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${#dates.format(workflowInfo.classTime,'yyyy/MM/dd H:mm:ss')}"></p>
                                    </div>
                                    <label class="control-label col-sm-1" style="margin-right: 10px;">上课学员:</label>
                                    <div class="col-sm-2" style="padding-left: 0;">
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.studentLogin}"></p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-1" style="margin-right: 10px;">课程状态:</label>
                                    <div class="col-sm-2" style="padding-left: 0;">
                                    <span th:switch="${workflowInfo.classState}">
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="1" th:text="待上课"></p>
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="2" th:text="已完成"></p>
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="3" th:text="已旷课"></p>
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="4" th:text="已取消"></p>
                                    </span>
                                    </div>
                                    <label class="control-label col-sm-1" style="margin-right: 10px;">上课教材:</label>
                                    <div class="col-sm-6" style="padding-left: 0;">
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.material}"></p>
                                    </div>

                                </div>
                        </fieldset>
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;"><span style="font-weight:bold;">录入信息</span></legend>
                            <div class="form-group">
                                <label class="control-label col-sm-2 col-lg-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>工作流类型:</label>
                                <div class="col-sm-6">
                                    <select name="processSettingId" id="processSettingId" class="form-control" onchange="getQuestionList($(this).val())">
                                        <option value="" >选择工作流类型</option>
                                        <option th:each="item:${listType}" th:selected="${item.processSettingId==workflowInfo.processSettingId}" th:value="${item.processSettingId}" th:text="${item.processName}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>问题分类:</label>
                                <div class="col-sm-6">
                                    <select name="questionTypeId" id="questionTypeId" class="form-control">
                                        <option value="" >选择问题分类</option>
                                        <option th:each="item:${listQuestion}" th:selected="${item.id==workflowInfo.questionTypeId}" th:value="${item.id}" th:text="${#strings.concat(item.cn_name,' | ',item.en_name)}">选择问题分类</option>
                                    </select>
                                </div>
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>是否返还课时:</label>
                                <div class="col-sm-2 radio-inline">
                                    <label><input type="radio" name="returnClass" value="1" th:checked="${workflowInfo.returnClass==1}"> 是</label>&emsp;&emsp;
                                    <label><input type="radio" name="returnClass" value="0" th:checked="${workflowInfo.returnClass==0}"> 否</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>问题描述:</label>
                                <div class="col-sm-10">
                                    <textarea name="content" id="workflowContent" rows="4" class="form-control" th:text="${workflowInfo.content}"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>附件:</label>
                                <div class="col-sm-10">
                                    <div class="file-loading">
                                        <label>Preview File Icon</label>
                                        <input id="fileUpload" name="uploadFiles" type="file" multiple>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" id="inputHidden">
                                <input type="hidden" name="id" id="workflowId" th:value="${workflowInfo.id}">
                                <input type="hidden" name="lessonId" id="lessonId" th:value="${workflowInfo.lessonId}">
                                <input id="filePath" type="hidden" th:value="${workflowInfo.filePaths}">
                                <div class="col-sm-11 text-center" >
                                    <button type="button" class="btn btn-default btn-md" onclick="layerClose()"> 取消 </button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-primary btn-md" th:onclick="|submitForm()|"> 保存 </button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustom(~{::script})">
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js}" type="text/javascript"></script>
    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is   它必须在fileinput.min.js之前引入 -->
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js}" type="text/javascript"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js}"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js}"></script>
    <script>
        $(function () {
            let previewConfig=initialPreviewConfig();
            $("#fileUpload").fileinput({
                language: 'zh',
                // theme: 'fas',
                uploadUrl:'/workflow/upload/attachment',
                uploadAsync: false,
                browseOnZoneClick: true,
                showUpload: false,
                showCaption: false,
                showBrowse: false,
                dropZoneEnabled: true,
                // showPreview: true,
                browseClass: "btn btn-primary btn-md",
                fileType: "any",
                // allowedFileTypes: ['image', 'text', 'video', 'audio', 'flash'],
                allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png', 'txt','log','pdf','xls','doc','xlsx','docx','swf','mp3','wma','wav','rar','zip','mp4'],
                maxFileSize: 51200, //单位为kb，如果为0表示不限制文件大小
                msgSizeTooLarge: '文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.',
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                layoutTemplates: {
                    actionUpload: ''//就是让文件上传中的文件去除上传按钮
    //      actionDelete: '',//去除删除按钮
                },
                uploadExtraData: {"lessonId":$("#lessonId").val(),"processSettingId":$("#processSettingId").val()},
                initialPreviewAsData: true,
                initialPreview: $.trim($("#filePath").val())===""?"":JSON.parse($("#filePath").val()),
                initialPreviewConfig: previewConfig
            }).on('fileuploaded', function(event, data, previewId, index) {
                let response = data.response;
                // $("#inputHidden").append('<input type="hidden" name="listFilePath" value="'+response.listFilePath+'">');
                // alert(response.listFilePath)
            }).on('filebatchuploadcomplete', function(event, files, extra) {
                // alert($("input[name='listFilePath']").length);
                // addWorkflow();
            }).on('filebatchuploadsuccess',function (event, data, previewId, index) {
                // var form = data.form, files = data.files, extra = data.extra,
                //     response = data.response, reader = data.reader;
                // console.log("data: "+ JSON.stringify(data));
                // console.log(data.jqXHR.statusText==="success");
                if (data.jqXHR.statusText==="success"){
                    $("#inputHidden").append('<input type="hidden" name="listFilePath" value="'+data.response.listFilePath+'">');
                    addWorkflow();
                }else {
                    layer.msg("上传文件失败",{icon:2});
                }
            });
        });
        function initialPreviewConfig() {
            let previewConfig1=[];
            let filePath=$.trim($("#filePath").val())===""?"":JSON.parse($("#filePath").val());
            if (filePath!==""){
                let config={};
                for (let i=0;i<filePath.length;i++){
                    // console.log(filePath[i].lastIndexOf("."))
                    let suffix=filePath[i].substring(filePath[i].lastIndexOf(".")+1).toLowerCase();
                    // console.log("suffix: "+suffix);
                    config.key = i+1;
                    if (suffix === "mp4"){
                        config.type = "video";
                        config.filetype = "video/mp4";
                    }else if (suffix === "jpg" || suffix === "jpeg" || suffix === "png" || suffix === "gif"){
                        config.type = "image";
                    }else if (suffix === "pdf"){
                        config.type = "pdf";
                    }else if (suffix === "txt" || suffix === "log"){
                        config.type = "text";
                    }else if (suffix === "swf"){
                        config.type = "flash";
                    }else if (suffix === "mp3" || suffix === "wma" || suffix === "wav"){
                        config.type = "audio";
                    }else {
                        config.type = "object";
                    }
                    previewConfig1.push(config);
                }
                // console.log("previewConfig:"+JSON.stringify(previewConfig));
            }
            return previewConfig1;
        }

        let loadIndex;
        function submitForm() {
            loadIndex = layer.load();
            if ($("#processSettingId").val()===""){
                layer.msg("请选工作流类型",{icon:2});
                layer.close(loadIndex);
                return false;
            }
            if ($("#questionTypeId").val()===""){
                layer.msg("请选择问题分类",{icon:2});
                layer.close(loadIndex);
                return false;
            }
            if ($.trim($("#workflowContent").val())===""){
                layer.msg("请输入问题描述",{icon:2});
                $("#workflowContent").select();
                layer.close(loadIndex);
                return false;
            }
            let filesCount = $('#fileUpload').fileinput('getFilesCount');
            // alert(filesCount);
            if (filesCount>0){
                //上传附件，成功回调方法
                $("#fileUpload").fileinput("upload");
                // $("#fileUpload").fileinput('disable');
            }else {
                let processSettingId=$("#processSettingId").val();
                if ("6" === processSettingId || "7" === processSettingId){
                    addWorkflow();
                }else {
                    layer.msg("请上传附件",{icon:2});
                    layer.close(loadIndex);
                    return false;
                }
            }
            // layer.close(loadIndex);
        }

        function addWorkflow() {
            if ($("#processSettingId").val()===""){
                layer.msg("请选工作流类型",{icon:2});
                return false;
            }
            let questionTypeIdVal=$("#questionTypeId").val();
            if ($.trim(questionTypeIdVal)===""){
                layer.msg("请选择问题分类",{icon:2});
                return false;
            }
            let workflowContent=$("#workflowContent").val();
            if ($.trim(workflowContent)===""){
                layer.msg("请描述问题",{icon:2});
                return false;
            }
            $.post("/workflow/edit",$("form").serialize(),function (result) {
                if (result.status>0){
                    layer.msg("修改工作流成功",{icon:1},function() {
                        // layerClose();
                        if ($("#continueAdd").length>0 && parseInt($("#continueAdd").val())===1){
                            window.location.reload();
                        }else {
                            parent.window.location.reload();
                        }
                    });
                }else {
                    layer.msg("修改工作流失败，请重试",{icon:2},function() {
                        // layerClose();
                        window.location.reload();
                    });
                }
                layer.close(loadIndex);
            },"json");
        }

        //获取问题类别
        function getQuestionList(processSettingId) {
            $("#questionTypeId").empty();
            $("#questionTypeId").append('<option value="" >选择问题分类</option>');
            if (processSettingId===''){
                return false;
            }
            if (processSettingId==="6" || processSettingId==="7"){
                $("input[name='returnClass'][value='0']").prop("checked",true);
                $("input[name='returnClass']").attr("disabled",true);
            }else {
                $("input[name='returnClass']").attr("disabled",false);
            }
            $("#fileUpload").fileinput('refresh',{uploadExtraData: {"lessonId":$("#lessonId").val(),"processSettingId": processSettingId}});
            let url='/workflow/question/list/'+processSettingId;
            $.post(url,{},function (result,status) {
                if (status==="success"){
                    if (result.status>0){
                        let listQuestion=result.data;
                        if(listQuestion !=null && listQuestion.length>0){
                            let optionHtml ="";
                            for (let i=0;i<listQuestion.length;i++){
                                optionHtml+='<option value="'+listQuestion[i].id+'">'+listQuestion[i].cn_name+'</option>';
                            }
                            $("#questionTypeId").append(optionHtml)
                        }
                    }else {
                        layer.msg("获取取消课程原因失败",{icon:2})
                    }
                }else {
                    layer.msg("请求失败:"+status,{icon:2})
                }
            },"json");
        }

        //关闭当前layer弹出层
        function layerClose() {
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }
    </script>
</div>
</body>
</html>